/**
* 用户列表
*/
<template>
	<vp-main-page @refresh="loadDataList">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
				label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="keyword">
							<template #label><vp-label-keyword /></template>
							<el-input v-model="searchForm.keyword" v-trim placeholder=""></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bmdm">
							<template #label><vp-label zh="部门" en="Department" /></template>
							<vp-department-select-tree :selectedId="searchForm.bmdm" :selectedText="searchForm.bmmc"
								@treeSelected="handleDepartmentSelected" class="w100" clearable/>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jddm">
							<template #label><vp-label zh="基地" en="Model" /></template>
							<VpBaseSelectTree :selectedId="searchForm.jddm" @treeSelected="handleBaseSelected"
								class="w100">
							</VpBaseSelectTree>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="state">
							<template #label><vp-label zh="状态" en="Status" /></template>
							<el-select v-model="searchForm.state" class="w100">
								<el-option :value="1" label="启用/Enabled"></el-option>
								<el-option :value="0" label="禁用/Disabled"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'systemUser.edit'" @click="handleAdd" />
		</template>
		<template #table>
			<vp-table ref="tableRef" :data="tableData" @sort-change="handleSortChange" row-key="id" v-loading="loading">
				<el-table-column type="index" align="center" label="#">
				</el-table-column>
				<el-table-column sortable="custom" prop="username" min-width="110" show-overflow-tooltip>
					<template #header><vp-label zh="用户名" en="UserName" /></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.username)" />
					</template>
				</el-table-column>
				<el-table-column prop="realname" min-width="100" sortable="custom" show-overflow-tooltip>
					<template #header><vp-label zh="姓名" en="Name" /></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.realname)" />
					</template>
				</el-table-column>
				<el-table-column prop="sex" show-overflow-tooltip>
					<template #header><vp-label zh="性别" en="Sex" /></template>
					<template #default="scope">
						{{ scope.row.sex === 1 ? '男/Male' : (scope.row.sex === 2 ? '女/Female' : '') }}
					</template>
				</el-table-column>
				<el-table-column prop="email" show-overflow-tooltip>
					<template #header><vp-label zh="邮箱" en="Email" /></template>
				</el-table-column>
				<el-table-column prop="cellphone" show-overflow-tooltip>
					<template #header><vp-label zh="手机" en="Mobile" /></template>
				</el-table-column>
				<el-table-column prop="phone" show-overflow-tooltip>
					<template #header><vp-label zh="电话" en="Phone" /></template>
				</el-table-column>
				<el-table-column prop="state" show-overflow-tooltip width="120" align="center">
					<template #header><vp-label zh="状态" en="State" /></template>
					<template #default="scope">
						<el-tag v-if="scope.row.state === 1" type="success">启用/Enabled</el-tag>
						<el-tag v-else type="danger">禁用/Disabled</el-tag>
					</template>
				</el-table-column>
				<el-table-column :label="$t('department.dprtname')" prop="department.dprtname" show-overflow-tooltip
					min-width="110">
					<template #header><vp-label zh="部门" en="Department" /></template>
				</el-table-column>
				<el-table-column prop="jddmMc" label="基地" show-overflow-tooltip min-width="110">
					<template #header><vp-label zh="基地" en="Model" /></template>
				</el-table-column>
				<el-table-column prop="zw" show-overflow-tooltip>
					<template #header><vp-label zh="职务" en="Position" /></template>
				</el-table-column>
				<el-table-column :label="$t('item.operations')" fixed="right" width="280">
					<template #header>
						<vp-label-operations />
					</template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit text v-auth="'systemUser.edit'" @click="handleEdit(scope.row)" />
							<vp-btn type="primary" text v-auth="'systemUser.edit'" @click="handleEditBasePermission(scope.row)">
								<vp-label zh="基地权限" en="Base Perm." />
							</vp-btn>
							<vp-btn type="primary" text v-auth="'systemUser.edit'" @click="handleEditWarehousePermission(scope.row)">
								<vp-label zh="仓库权限" en="Whse. Perm." />
							</vp-btn>
							<vp-btn-reset text v-auth="'systemUser.edit'" @click="handleResetPassword(scope.row)" />
							<vp-btn-del text v-auth="'systemUser.edit'" @click="handleDelete(scope.row)" />
							<vp-btn-disable v-if="scope.row.state === 1" text v-auth="'systemUser.edit'"
								@click="handleChangeState(scope.row)" />
							<vp-btn-enable v-else text v-auth="'systemUser.edit'"
								@click="handleChangeState(scope.row)" />
						</el-space>
					</template>
				</el-table-column>
			</vp-table>
		</template>
		<template #pagination>
			<vp-pagination @change="loadDataList" :total="page.total" v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize">
			</vp-pagination>
		</template>
		<EditUser ref="editUserRef" @formSubmited="handleFormSubmited"></EditUser>
		<EditBasePermission ref="editBasePermissionRef" @formSubmited="handleFormSubmited"></EditBasePermission>
		<EditWarehousePermission ref="editWarehousePermissionRef" @formSubmited="handleFormSubmited"></EditWarehousePermission>
	</vp-main-page>
</template>

<script setup lang="ts" name="systemUser">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';
import { ElMessage } from 'element-plus';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';

const EditUser = defineAsyncComponent(() => import('./component/EditUser.vue'));
const EditBasePermission = defineAsyncComponent(() => import('./component/EditBasePermission.vue'));
const EditWarehousePermission = defineAsyncComponent(() => import('./component/EditWarehousePermission.vue'));

import VpBaseSelectTree from '/@/components/vp/base/VpBaseSelectTree.vue';

const searchForm = reactive({
	keyword: "",
	bmdm: "",
	bmmc: "",
	jddm: "",
	state: 1,
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/system/user/list', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || []
		page.total = res?.data?.total || 0
		page.pageNum = res?.data?.pageNum || 1
	}).finally(() => {
		loading.value = false
	})
}

const searchFormRef = ref();

// 重置搜索条件
const handleSearchReset = () => {
	searchFormRef.value.resetFields();
	searchForm.bmmc = "";
}

// 列表字段排序
const handleSortChange = (column: any) => {
	page.sortColumn = column.prop;
	page.sortOrder = column.order == 'descending' ? 'desc' : 'asc'
	loadDataList()
}

// 组件挂载后事件
onMounted(() => {
	loadDataList()
})

const editUserRef = ref();

// 新增
const handleAdd = () => {
	editUserRef.value.handleOpen('add');
}

// 修改
const handleEdit = (row: any) => {
	editUserRef.value.handleOpen('edit', row.id);
}

// 表单完成后回调事件
const handleFormSubmited = (data: any) => {
	loadDataList()
}

// 删除
const handleDelete = (row: any) => {
	VpMessageBox.confirmDelete().then(() => {
		request.delete(`/system/user/${row.id}`).then(res => {
			loadDataList();
		})
	});
}

// 禁用/启用
const handleChangeState = (row: any) => {
	VpMessageBox.confirm({
		zh: '是否确定进行此操作？',
		en: 'Are you sure you want to perform this operation?',
	}, {
		zh: '提示',
		en: 'Info',
	}, {
		type: 'warning',
	}).then(() => {
		request.post(`/system/user/${row.id}/state/${row.state}`).then(res => {
			loadDataList();
		})
	});
}

// 选择部门后回调事件
const handleDepartmentSelected = (data: any) => {
	searchForm.bmdm = data.id;
	searchForm.bmmc = data.label;
}
// 选择基地后回调事件
const handleBaseSelected = (data: any) => {
	searchForm.jddm = data.id;
}

// 重置密码
const handleResetPassword = (row: any) => {
	VpMessageBox.confirm({
		zh: '确定要重置密码吗？',
		en: 'Are you sure you want to reset the password?',
	}, {
		zh: '重置密码',
		en: 'Reset Password',
	}, {
		type: 'warning',
	}).then(() => {
		request.post(`/system/user/reset/pwd/${row.id}`).then(() => {
			ElMessage.success("操作成功/Success.");
		})
	});
}

// 修改基地权限
const editBasePermissionRef = ref();
const handleEditBasePermission = (row: any) => {
	editBasePermissionRef.value.handleOpen(row.id);
}

// 修改仓库权限
const editWarehousePermissionRef = ref();
const handleEditWarehousePermission = (row: any) => {
	editWarehousePermissionRef.value.handleOpen(row.id);
}

const tableRef = ref();

</script>

<style lang="scss" scoped></style>